<template>

  <div class="search">
    <van-icon name="arrow-left" size="26" @click="router.back()" />
    <van-search v-model="value" :placeholder="placeholder" background="transparent" shape="round" />
    <div class="button" @click="getResultList">搜索</div>
  </div>

  <div class="hot-search-title" v-if="getResult">热门搜索</div>
  <ul class="hot-search" v-if="getResult">
    <li v-for="words in hotSearch" :key="words.id">
      <div class="keyword" @click="gotoComic(words.id)"> {{ words.title }} </div>
    </li>
  </ul>

  <!-- 这里是历史搜索记录 to do -->

  <!-- 这里是搜索结果列表 -->


  <van-list v-if="!getResult" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <ul class="result">
      <li class="result-item" v-for="comic in results" :key="comic.id" @click="gotoComic(comic.id)">
        <img :src="getProxyImageUrl(comic.pic)" :alt="comic.title">
        <div class="info">
          <div class="title-lastedChapter">
            <div class="title">{{ comic.title }}</div>
            <div class="lastedChapter">更新至{{ comic.lastchapter }}</div>
          </div>
          <div class="author-tag">
            <div class="author">{{ comic.author }}</div>
            <div class="tag">{{ comic.tag }}</div>
          </div>
        </div>
      </li>
    </ul>
  </van-list>


</template>


<script setup>
import { getProxyImageUrl } from "@/util/index.js"

import { getHotSearch, getSearchResults } from "@/api/index.js"
import { ref, onMounted } from 'vue';

import { useRouter } from 'vue-router';
const router = useRouter();

const placeholder = ref('');
const value = ref('');
const hotSearch = ref([]);
const loading = ref(false);
const finished = ref(false);
const getResult = ref(true);

const results = ref([]);

const gotoComic = (id) => {
  router.push({ path: `/comicCover/${id}` })
}

const pageNum = ref(1);

// 加载第一页搜索结果
const getResultList = async () => {
  loading.value = true;
  getResult.value = false;
  results.value = [];
  const res = await getSearchResults(value.value, pageNum.value);
  results.value.push(...res.data.list);
  loading.value = false
}


const onLoad = async () => {
  pageNum.value++;
  loading.value = true;
  const res = await getSearchResults(value.value, pageNum.value);
  if (res.data.list.length === 0) {
    loading.value = false
    finished.value = true;
    return;
  }
  results.value.push(...res.data.list);
  loading.value = false

}



onMounted(async () => {
  //热门搜索
  const res = await getHotSearch()
  placeholder.value = res.data.list[0].title
  hotSearch.value = res.data.list.map(item => ({
    id: item.id,
    title: item.title
  }));

});

</script>


<style scoped>
.search {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  gap: 10px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: #fff;
  box-sizing: border-box;
  height: 60px;
}

:deep(.van-icon) {
  flex-grow: 0;
  flex-shrink: 0;
}


:deep(.van-search) {
  /* width: 280px; */
  flex: 1
}

.button {
  flex-grow: 0;
  flex-shrink: 0;
}

.hot-search-title {
  font-size: 13px;
  color: #999;
  padding: 10px;
  margin-top: 60px;
}

.hot-search {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.keyword {

  font-size: 13px;
  color: #333;
  background-color: #e8e8e8;
  border-radius: 15px;
  padding: 5px 10px;

}


.result {
  list-style: none;
  margin: 0;
  padding: 10px;
  margin-top: 60px;
}

.result-item {
  display: flex;
  height: 150px;
  overflow: hidden;
  gap: 10px;
  padding: 5px 0;
  justify-content: flex-start;
  align-items: center;

}


.result-item img {
  border-radius: 5px;
  object-fit: cover;
  width: auto;
  height: 150px;
  display: block;
}

.result-item .info {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  align-items: flex-start;
}


.title-lastedChapter,
.author-tag {
  font-size: 14px;
  color: #999;
  padding: 0;
}


.lastedChapter {
  font-size: 14px;
  color: #999;
}

.info .title {
  font-size: 16px;
  color: #333;
  padding: 0;
  font-weight: bold;
  margin-bottom: 5px;
}

.author {
  margin-bottom: 5px;
}
</style>
